<template>
  <div class="paper">
    <div class="module-detail-header">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="f-left">
        <el-breadcrumb-item class="cursor-p">考试列表</el-breadcrumb-item>
        <el-breadcrumb-item class="cursor-p">任务列表</el-breadcrumb-item>
        <el-breadcrumb-item class="cursor-p">试卷列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-input
        size="small"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="username"
        @change="handleSearchPaperChange"
        @keyup.enter.native="searchUserPaper()"
      ></el-input>
    </div>
    <el-row :gutter="12">
      <el-col :span="8" v-for="(item,index) in paperList" :key="index">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>试卷{{index+1}}</span>
            <el-button style="float: right; padding: 3px 0" type="text">查看试卷</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { vInput, vSingleImg, vSingleAudio, vSingleVideo } from "vHome";
import { userService } from "api";
export default {
  components: {
    vInput,
    vSingleImg,
    vSingleAudio,
    vSingleVideo
  },
  props: ["index", "task"],
  data() {
    return {
      paperList: [1, 2, 3, 4],
      searchObj: {},
      inputVisible: false,
	  inputValue: "",
	  refreshList:0,
	  refreshList1:0,
	  username:""
    };
  },
  methods: {
    getPaperList() {
		debugger;
      userService.getPaperList(this.task).then(res => {
		  debugger;
		this.paperList = res.content;		
      });
	},
	handleCurrentChange() {
      if (this.username) {
        this.categorySearchObj.page = this.searchObj.page;
        this.categorySearchObj.size = this.searchObj.size;
        this.refreshList2++;
      }else {
        this.refreshList++;
      }
	},
	handleSearchPaperChange(value) {
      console.log(value);
      this.searchObj.page = 1;
      if (value.length == 0) {
		this.username = "";	
        return this.refreshList++;
      } else {
        this.paperList.page = 1;
        this.username = username;
        // console.log(this)
        return this.refreshList1++;
      }
    },
  },
  mounted() {
    this.getPaperList();
  }
};
</script>
<style scoped>
.box-card {
  margin-bottom: 10px;
}
</style>
